<template>
  <div class="star-rating">
    <i
      v-for="n in max"
      :key="n"
      class="el-icon-star-on"
      :class="{ active: n <= value }"
      @click="select(n)"
    ></i>
  </div>
</template>

<script>
export default {
  name: 'StarRating',
  props: {
    value: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      default: 3
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  methods: {
    select(val) {
      if (this.disabled) return

      const newVal = val === 1 && this.value === 1 ? 0 : val
      this.$emit('input', newVal)
    }
  }
}
</script>

<style scoped>
.star-rating {
  display: flex;
  gap: 4px;
  margin-top: 5px;
}

.el-icon-star-on {
  font-size: 24px;
  color: #dcdfe6;
  cursor: pointer;
  transition: color 0.3s;
}

.el-icon-star-on.active {
  color: #f7ba2a;
}
</style>
